<template>
  <div style="width: 80%; margin: 0 auto">
    <h1 style="text-align: center; margin-bottom: 30px">植物指南列表</h1>
    <el-input
        v-model="searchTitle"
        placeholder="请输入指南标题进行搜索"
        style="margin-bottom: 20px"
    >
      <template #suffix>
        <el-button icon="Search" @click="fetchGuides"></el-button>
      </template>
    </el-input>

    <el-row :gutter="20">
      <el-col :span="6" v-for="guide in guides" :key="guide.id">
        <el-card shadow="hover" @click="navigateToGuide(guide.id)" class="guide-card">
          <img v-if="guide.img" :src="guide.img" alt="Plant Guide Image" class="card-image" />
          <div class="card-content">
            <el-tooltip effect="dark" :content="guide.title" placement="top">
              <h3 class="card-title">{{ guide.title }}</h3>
            </el-tooltip>
            <p class="card-description">{{ guide.plantChineseName }} - {{ guide.plantLatinName }}</p>
            <div class="card-tags">
              <el-tag v-for="(tag, index) in parseTags(guide.tags)" :key="index" size="small" style="margin-right: 5px;">
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="pagination-wrapper" v-if="pagination.total > 0">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :current-page="pagination.pageNum"
          @current-change="handlePageChange"
          class="custom-pagination"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import request from "@/utils/request.js";
import router from "@/router/index.js";
import { ElMessage } from "element-plus";

const searchTitle = ref('');
const guides = ref([]);
const pagination = reactive({
  pageNum: 1,
  pageSize: 8,
  total: 0
})
const fetchGuides = () => {
  request.get('/plantGuide/selectPage', {
    params: {
      title: searchTitle.value,
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize  // 使用分页参数
    }
  }).then(res => {
    if (res.code === '200') {
      if (Array.isArray(res.data.list)) {
        guides.value = res.data.list;
        pagination.total = res.data.total
        console.log('Guides:', guides.value); // 调试信息
      } else {
        console.error("Unexpected data structure:", res.data);
        ElMessage.error("获取指南列表失败，数据结构异常");
      }
    } else {
      console.error("API Error:", res.msg);
      ElMessage.error(res.msg);
    }
  }).catch(error => {
    console.error("Fetch error:", error);
    ElMessage.error("获取指南列表失败，请稍后再试");
  });
};
const handlePageChange = (newPage) => {
  pagination.pageNum = newPage
  fetchGuides()
  window.scrollTo({ top: 0, behavior: 'smooth' }) // 滚动到顶部
}
const navigateToGuide = (id) => {
  try {
    router.push({ path: '/front/plantGuideDetail', query: { id: id } });
  } catch (error) {
    console.error("Navigation error:", error);
    ElMessage.error("导航失败，请稍后再试");
  }
};

const parseTags = (tags) => {
  try {
    return JSON.parse(tags.replace(/'/g, '"'));
  } catch (error) {
    console.error("Failed to parse tags:", error);
    return [];
  }
};

onMounted(() => {
  fetchGuides();
});
</script>

<style scoped>
.guide-card {
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  height: 350px; /* 增加卡片高度以容纳标签 */
}

.guide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}

.card-content {
  padding: 15px;
  height: calc(100% - 150px); /* 剩余空间用于内容 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-size: 18px;
  margin: 0 0 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-description {
  font-size: 14px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
</style>



